<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Games</title>
    <!-- Favicon 网站图标-->
    <link href="img/favicon.ico" rel="shortcut icon" />
    <!-- 引入WOW动画库 -->
    <link rel="stylesheet" href="./css/animate.min.css" />

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- swiper -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />

    <!-- 引入图标文件 twitter facebook等 -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />

    <!-- 引入less文件此处必须添加 /less  ！！！ -->
    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="./css/reset.less" />

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less" />
    <link rel="stylesheet/less" href="./css/index.less" />
  </head>
  <body>
    <!-- Page Preloder 加载界面-->
    <div id="preloder">
      <div class="loader"></div>
    </div>

    <!-- Header 头部 -->
    <header>
      <!-- 导航栏 -->
      <nav class="navbar navbar-expand-lg">
        <a class="site-logo" href="index.html"><img src="./img/logo.png" alt="" /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="./Index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./games.html">games</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./reviews.html">reviews</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">News</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact.html">contact</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <!-- Header end -->

    <!-- page top section -->
    <section class="page-top-section page-top-section2">
      <div class="header-social d-flex justify-content-end">
        <p>Follow us:</p>
        <a href="#"><i class="fa fa-pinterest"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-dribbble"></i></a>
        <a href="#"><i class="fa fa-behance"></i></a>
      </div>
      <div class="page-info">
        <h2>Games</h2>
        <div class="site-breadcrumb">
          <a href="">Home</a> /
          <span>Games</span>
        </div>
      </div>
    </section>
    <!-- page top section end-->

    <!-- Games list section -->
    <section class="games-list">
      <div class="container">
        <ul class="reviews-filter">
          <li><a href="">A</a></li>
          <li><a href="">B</a></li>
          <li><a href="">C</a></li>
          <li><a href="">D</a></li>
          <li><a href="">E</a></li>
          <li><a href="">F</a></li>
          <li><a href="">G</a></li>
          <li><a href="">H</a></li>
          <li><a href="">I</a></li>
          <li><a href="">J</a></li>
          <li><a href="">K</a></li>
          <li><a href="">L</a></li>
          <li><a href="">M</a></li>
          <li><a href="">N</a></li>
          <li><a href="">O</a></li>
          <li><a href="">P</a></li>
          <li><a href="">Q</a></li>
          <li><a href="">R</a></li>
          <li><a href="">S</a></li>
          <li><a href="">T</a></li>
          <li><a href="">U</a></li>
          <li><a href="">V</a></li>
          <li><a href="">W</a></li>
          <li><a href="">X</a></li>
          <li><a href="">Y</a></li>
          <li><a href="">Z</a></li>
        </ul>
        <div class="row">
          <div class="col-xl-7 col-lg-8 col-md-7">
            <div class="row">
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/1.jpg" alt="#" />
                  <h5>Zombie Appocalips 2</h5>
                  <a href="./game-detail.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/2.jpg" alt="#" />
                  <h5>Dooms Day</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/3.jpg" alt="#" />
                  <h5>The Huricane</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/4.jpg" alt="#" />
                  <h5>Star Wars</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/5.jpg" alt="#" />
                  <h5>Candy land</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/6.jpg" alt="#" />
                  <h5>E.T.</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/7.jpg" alt="#" />
                  <h5>Zombie Appocalips 2</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/8.jpg" alt="#" />
                  <h5>Dooms Day</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
              <div class="col-lg-4 col-md-6">
                <div class="game-item">
                  <img src="img/games/9.jpg" alt="#" />
                  <h5>The Huricane</h5>
                  <a href="game-single.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
                </div>
              </div>
            </div>
            <div class="site-pagination">
              <a href="#" class="active">01.</a>
              <a href="#">02.</a>
              <a href="#">03.</a>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-5 sidebar">
            <div class="widget-item">
              <div class="categories-widget">
                <h4>categories</h4>
                <ul>
                  <li><a href="">Games</a></li>
                  <li><a href="">Gaming Tips & Tricks</a></li>
                  <li><a href="">Online Games</a></li>
                  <li><a href="">Team Games</a></li>
                  <li><a href="">Community</a></li>
                  <li><a href="">Uncategorized</a></li>
                </ul>
              </div>
            </div>
            <div class="widget-item">
              <div class="categories-widget">
                <h4>platform</h4>
                <ul>
                  <li><a href="">Xbox</a></li>
                  <li><a href="">X box 360</a></li>
                  <li><a href="">Play Station</a></li>
                  <li><a href="">Play Station VR</a></li>
                  <li><a href="">Nintendo Wii</a></li>
                  <li><a href="">Nintendo Wii U</a></li>
                </ul>
              </div>
            </div>
            <div class="widget-item">
              <div class="categories-widget">
                <h4>Genre</h4>
                <ul>
                  <li><a href="">Online</a></li>
                  <li><a href="">Adventure</a></li>
                  <li><a href="">S.F.</a></li>
                  <li><a href="">Strategy</a></li>
                  <li><a href="">Racing</a></li>
                  <li><a href="">Shooter</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Games list section end-->

    <!-- Featured section -->
    <section class="featured-section">
      <div class="featured-bg featured-bg1"></div>
      <div class="featured-box">
        <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
        <h3>The game you’ve been waiting for is out now</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
          suspendisse ultrices gravida. Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliquamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum posuere porttitor
          justo id pellentesque. Proin id lacus feugiat, posuere erat sit amet, commodo ipsum. Donec pellentesque vestibulum metus...
        </p>
        <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
      </div>
    </section>
    <!-- Featured section end-->

    <!-- Newsletter section -->
    <section class="newsletter-section">
      <div class="container">
        <h2>Subscribe to our newsletter</h2>
        <form class="newsletter-form">
          <input type="text" placeholder="ENTER YOUR E-MAIL" />
          <button class="site-btn">subscribe <img src="img/icons/double-arrow.png" alt="#" /></button>
        </form>
      </div>
    </section>
    <!-- Newsletter section end -->

    <!-- Footer section -->
    <section class="footer-section">
      <div class="container">
        <div class="footer-left-pic">
          <img src="img/footer-left-pic.png" alt="" />
        </div>
        <div class="footer-right-pic">
          <img src="img/footer-right-pic.png" alt="" />
        </div>
        <a href="#" class="footer-logo">
          <img src="./img/logo.png" alt="" />
        </a>
        <ul class="footer-menu">
          <li><a href="">Home</a></li>
          <li><a href="">Games</a></li>
          <li><a href="">Reviews</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Contact</a></li>
        </ul>
        <div class="footer-social d-flex justify-content-center">
          <a href="#"><i class="fa fa-pinterest"></i></a>
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-dribbble"></i></a>
          <a href="#"><i class="fa fa-behance"></i></a>
        </div>
        <div class="copyright"><a href="">Colorlib</a> 2018 @ All rights reserved</div>
      </div>
    </section>
    <!-- Footer section end -->
  </body>
</html>
<!-- 引入jq -->
<script src="./js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="./js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="./js/swiper-bundle.min.js"></script>

<!-- 引入wow -->
<script src="./js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="./js/less-4.1.3.js"></script>

<!-- 引入主要js -->
<script src="./js/main.js"></script>
